<template>
  <el-row :gutter="20" class="container">
    <el-col :span="10">
      <el-button icon="el-icon-delete" size="small" type="danger" @click="clearCartList">清空</el-button>
      <el-button icon="el-icon-truck" size="small" type="primary" @click="addOilToCart">选油品</el-button>
    </el-col>
    <el-col :span="14">
      <div class="sum-item">数量：<span>{{ numsOfCartList }}</span> 合计：<span>￥{{ amountOfCartList.toFixed(2) }}</span>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import {mapGetters} from 'vuex'
import {unlockFuelRecord} from '@/api/settle'

var Mousetrap = require('mousetrap')
export default {
  name: 'CartLeftSumBar',
  computed: {
    ...mapGetters([
      'cartList',
      'stationId',
      'operator',
      'numsOfCartList',
      'amountOfCartList',
      'cartOilList',
      'cartVisible'
    ])
  },
  mounted () {
    // 绑定快捷键
    this.bindKeyboard()
  },
  methods: {
    clearCartList () {
      console.log('clearCartList')
      // 解锁油品记录
      this.cartList.filter(item => item.type === 'oil').forEach(item => {
        unlockFuelRecord({id: item.id, stationId: this.stationId, operator: this.operator})
      })
      this.$store.dispatch('clearCartList')
    },
    // 把油品待结算添加到购物车
    addOilToCart () {
      // 判断是否已选油品，如果已有油品则不允许选
      if (this.cartOilList.length > 0) {
        this.$message.warning('购物车中已有加油记录！')
        return false
      }
      // 打开加油记录选择窗口
      this.$store.dispatch('setChosenGun', '')
      this.$store.dispatch('showToSettleListDialog')
    },
    bindKeyboard () {
      Mousetrap.bind('del', () => {
        console.log('delete key press')
        if (this.cartVisible) {
          this.clearCartList()
        }
      })
    }
  }
}
</script>

<style scoped>
.container {
  margin-top: 10px;
}

.sum-item {
  text-align: right;
  font-size: 1.4rem;
}

.sum-item span {
  font-weight: bold;
  font-size: 1.6rem;
  color: orangered;
  margin-right: 10px;
}
</style>